<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0" />
	<link rel="shortcut icon" type="image/x-icon" href="https://game-1256953255.cos.ap-guangzhou.myqcloud.com/default/favicon.ico" media="screen" />
	<title>注册萌妹抓娃娃</title>
	
	<style type="text/css">
		* {
			margin: 0;
			padding: 0
		}

		body,
		td,
		th {
			font-family: "微软雅黑";
			font-size: 12px;
			color: #1d1007;
			line-height: 24px;
		}

		html {
			width: 100%;
			height: 100%;
		}

		.element-box {
			overflow-y: auto;
			position: relative
		}
		.element-box .bg-img {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -99;
		}

		.div-top {
			width: 60%;
			height: 4.8rem;
			margin: 0 auto;
			/*border: 1px solid black;*/
			border-radius: 5px;
			margin-top: 13rem;
			text-align: center;
		}

		.div-top .div-img {
			height: 45px;
			width: 45px;
			margin: 0 auto;
			text-align: center;
		}

		.div-top .div-img img {
			height: 100%;
			width: 100%;
			border-radius: 100%;
			border: 1px solid #650418;
		}

		.div-top .div-name {
			width: 70%;
			height: 25%;
			margin: 8px auto;
			text-align: center;
		}

		.div-content {
			width: 80%;
			height: 9rem;
			margin: 0 auto;
			/*border: 1px solid black;*/
			border-radius: 5px;
			margin-top: 7.4rem;
			text-align: center;
		}

		.div-content .form-li {
			height: 40px;
			margin: 10px auto;
		}

		/*	.div-content .form-li input{
		cursor: pointer;
	}*/

		.div-content .li-phone input {
			width: 89%;
		}

		.div-content .form-li .valicode {
			width: 42%;
			float: left;
		}

		.div-content .form-li .valisub {
//			width: 28%;
//			float: right;
			height: 40px;
			cursor: pointer;
		}

		.div-content .li-sub {
			height: 36px;
		}

		.div-content .form-li .sub {
			display: block;
			height: 100%;
			background: #f97995;
			border-radius: 30px;
			color: #ffffff;
			text-decoration: blink;
			font-style: normal;
			font-size: 1.4em;
			line-height: 40px;
			text-align: center;
		}

		.div-content .form-li .valicode,
		.phone,
		.valisub {
			height: 100%;
			border: 1px solid #999999;
			border-radius: 30px;
			padding: 0px 15px;
		}

		input{
			outline: none;
		}
	</style>
</head>

<body>
	<div class="element-box">
		<img class="bg-img" src="https://game-1256953255.cos.ap-guangzhou.myqcloud.com/default/setPhoneBack.jpg" />
		<div class="div-top">
			<div class="div-img">
				<img id="headImgStr" src="https://game-1256953255.cos.ap-guangzhou.myqcloud.com/myPictrue/head.jpg" />
			</div>
			<div class="div-name">
				<span style="font-size: 16px;color: #fc3964;" id="userNameStr">萌妹</span>
				<span style="font-size: 16px;color: #333333;">邀请你</span>
			</div>
		</div>
		<div class="div-content">
			<div class="form-li li-phone">
				<input type="text" class="phone" id="phone" name="phone" placeholder="请输入你的手机号" />
			</div>
			<div class="form-li ">
				<input type="text" class="valicode" id="valicode" name="valicode" placeholder="请输入验证码" />
				<input type="button" class="valisub" id="valisub" value="获取验证码" readOnly="true" />
			</div>
			<div class="form-li li-sub">
				<a href="javascript:" class="sub">领取</a>
			</div>
		</div>
	</div>
	<input type="hidden" id="inviteCode" th:value="${inviteCode}"/>
	<input type="hidden" id="headImg"  th:value="${headImg}"/>
	<input type="hidden" id="userName" th:value="${userName}"/>
	<input type="hidden" id="companyName" th:value="${companyName}"/>
	<input type="hidden" id="userId" value=""/>
</body>

</html>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="/layer/mobile/layer.js"></script>
<script th:inline="javascript">

	//初始化
	$(document).ready(function () {
		$("#headImgStr").attr("src",$("#headImg").val());
		var userNameStr = $("#companyName").val();
		if(userNameStr == null || userNameStr == "" || userNameStr == "无"){
			userNameStr = $("#userName").val();
		}
		$("#userNameStr").text(userNameStr);
		$("#phone").val("");
		$("#valicode").val("");
		var status = 0;
		
		//发送验证码，然后给这个号码绑定
		$("#valisub").on("click", function (){
			var phoneNum = $("#phone").val();
			var inviteCode = $("#inviteCode").val();
			var token = "";

			if(phoneNum == null || phoneNum == ""){
				layer.open({
			      content: '手机号码不能为空！'
			      ,time: 2
			      ,skin: 'msg'
			    });
				return false;
			}
			
			var REG_PHONE = /^((19[8,9])|(166)|(14[0-9])|(17[0-9])|(13[0-9])|(15[^4,\\D])|(18[0-9]))[0-9]{8}$/;
			console.log(REG_PHONE.test(phoneNum));
			if(!REG_PHONE.test(phoneNum)){
				layer.open({
			      content: '手机号码格式错误！'
			      ,time: 2
			      ,skin: 'msg'
			    });
				return false;
			}
			if(inviteCode == null || inviteCode == ""){
				layer.open({
			      content: '参数传入错误！'
			      ,time: 2
			      ,skin: 'msg'
			    });
				return false;
			}

			$.ajax({
				type: 'POST',
				async: false,
				url: 'http://dw.vipgz1.idcfengye.com/sms/sendMsgByRegist',
				data: {
					'phoneNum':phoneNum,
					'inviteCode':inviteCode,
					'token':token
				}
			}).then(function(result) {
				if(result.state == '1'){
					alert(result.msg);
					status = 1;
				}else if(result.state == '0'){
					alert(result.msg);
					return false;
				}else{
					//询问框
					layer.open({
					    content: result.msg
					    ,btn: ['确认','取消']
					    ,yes: function(index){
					    	window.location.href="http://www.fengxinghuyu.com/catchbaby/share/downloadView";
					        layer.close(index);
					    }
					});
					$("#valicode").val("");
				}
			});
		});
		
		//填写验证码 ，完成绑定
		$(".sub").on("click", function () {
			if(status == 1){
				var valicode = $("#valicode").val();
	 			var phoneNum = $("#phone").val();
				var inviteCode = $("#inviteCode").val();
				var token = "";

	 			if(phoneNum == null || phoneNum == ""){
					alert("手机号码不能为空！");
					return false;
				}
	 			if(valicode == null || valicode == ""){
	 				//layer.msg("验证码不能为空!",{shift:6});
	 				alert("验证码不能为空!");
	 				return false;
	 			}
	 			var REG_PHONE = /^((19[8,9])|(166)|(14[0-9])|(17[0-9])|(13[0-9])|(15[^4,\\D])|(18[0-9]))[0-9]{8}$/;
				console.log(REG_PHONE.test(phoneNum));
				if(!REG_PHONE.test(phoneNum)){
					alert("手机号码格式错误！");
					return false;
				}
				if(inviteCode == null || inviteCode == ""){
					alert("参数传入错误！");
					return false;
				}
				
				//提交
				$.ajax({
					type: 'POST',
					async: false,
					url: 'http://dw.vipgz1.idcfengye.com/user/registForBaby',
					data: {
						'phoneNum':phoneNum,
						'securityCode':valicode,
						'inviteCode':inviteCode,
						'token':token
					}
				}).then(function(result) {
					if(result.state == '1'){
						alert(result.msg);
						setTimeout(function(){
							window.location.href="http://www.fengxinghuyu.com/catchbaby/share/downloadView";
						},2000);
					}else{
						alert(result.msg);
						return false;
					}
				});
			}else{
				alert("请发送短信验证码!");
			}
		});
	});

	/**
	 * 获取widow的高度
	 */

	$('.element-box').css('height', $(window).height());
</script>